<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>HTML 编码规范 | 前端文档</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="shortcut icon" href="/icons/favicon.ico">
    <meta name="description" content="前端文档">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
    <link rel="preload" href="/assets/css/0.styles.d3d84be6.css" as="style"><link rel="preload" href="/assets/js/app.7f089e4c.js" as="script"><link rel="preload" href="/assets/js/2.9f5e73e8.js" as="script"><link rel="preload" href="/assets/js/3.2a47c23c.js" as="script"><link rel="preload" href="/assets/js/24.a88ce84e.js" as="script"><link rel="prefetch" href="/assets/js/10.b5c5700e.js"><link rel="prefetch" href="/assets/js/11.80390338.js"><link rel="prefetch" href="/assets/js/12.f067bd5f.js"><link rel="prefetch" href="/assets/js/13.20c94e2c.js"><link rel="prefetch" href="/assets/js/14.3a03f335.js"><link rel="prefetch" href="/assets/js/15.fc48fa10.js"><link rel="prefetch" href="/assets/js/16.06981385.js"><link rel="prefetch" href="/assets/js/17.9b40465f.js"><link rel="prefetch" href="/assets/js/18.d89ca224.js"><link rel="prefetch" href="/assets/js/19.c6848e16.js"><link rel="prefetch" href="/assets/js/20.a0711b97.js"><link rel="prefetch" href="/assets/js/21.d566ad85.js"><link rel="prefetch" href="/assets/js/22.4901943a.js"><link rel="prefetch" href="/assets/js/23.d6255fa3.js"><link rel="prefetch" href="/assets/js/25.19886fd0.js"><link rel="prefetch" href="/assets/js/26.5c944025.js"><link rel="prefetch" href="/assets/js/27.a61fd313.js"><link rel="prefetch" href="/assets/js/28.1e40ebfd.js"><link rel="prefetch" href="/assets/js/29.60c8dbe1.js"><link rel="prefetch" href="/assets/js/30.64963157.js"><link rel="prefetch" href="/assets/js/31.931ea69e.js"><link rel="prefetch" href="/assets/js/32.bce771e5.js"><link rel="prefetch" href="/assets/js/33.e9c7453f.js"><link rel="prefetch" href="/assets/js/34.99c27ee8.js"><link rel="prefetch" href="/assets/js/35.4066b2d3.js"><link rel="prefetch" href="/assets/js/36.fc941c57.js"><link rel="prefetch" href="/assets/js/37.14163d29.js"><link rel="prefetch" href="/assets/js/38.43335765.js"><link rel="prefetch" href="/assets/js/39.156dbace.js"><link rel="prefetch" href="/assets/js/4.6d8feda3.js"><link rel="prefetch" href="/assets/js/40.163bfe43.js"><link rel="prefetch" href="/assets/js/41.df97e701.js"><link rel="prefetch" href="/assets/js/42.9bafe70e.js"><link rel="prefetch" href="/assets/js/43.b86d1037.js"><link rel="prefetch" href="/assets/js/44.fc145987.js"><link rel="prefetch" href="/assets/js/45.594b749a.js"><link rel="prefetch" href="/assets/js/46.b6c8de53.js"><link rel="prefetch" href="/assets/js/47.bb78b392.js"><link rel="prefetch" href="/assets/js/48.3627a180.js"><link rel="prefetch" href="/assets/js/49.bbd39edf.js"><link rel="prefetch" href="/assets/js/5.77776c33.js"><link rel="prefetch" href="/assets/js/50.b68a715f.js"><link rel="prefetch" href="/assets/js/51.bc4475a2.js"><link rel="prefetch" href="/assets/js/6.480ee688.js"><link rel="prefetch" href="/assets/js/7.92c95b3e.js"><link rel="prefetch" href="/assets/js/8.4389b91c.js"><link rel="prefetch" href="/assets/js/9.4470fdec.js">
    <link rel="stylesheet" href="/assets/css/0.styles.d3d84be6.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">前端文档</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="standard Menu" class="dropdown-title"><span class="title">规范</span> <span class="arrow down"></span></button> <button type="button" aria-label="standard Menu" class="mobile-dropdown-title"><span class="title">规范</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/standard/HTML/" class="nav-link">
  HTML编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/CSS/" class="nav-link">
  CSS编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/JavaScript/" class="nav-link">
  JavaScript编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/VUE/" class="nav-link">
  VUE编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/Markdown/" class="nav-link">
  Markdown语法说明
</a></li><li class="dropdown-item"><!----> <a href="/standard/Commit/" class="nav-link">
  Git提交规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/JSON/" class="nav-link">
  JSON数据规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/CopyWriter/" class="nav-link">
  文案风格指南
</a></li></ul></div></div><div class="nav-item"><a href="/desgin/" class="nav-link">
  可视化平台
</a></div><div class="nav-item"><a href="/materiel/" class="nav-link">
  物料
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="plugin Menu" class="dropdown-title"><span class="title">插件</span> <span class="arrow down"></span></button> <button type="button" aria-label="plugin Menu" class="mobile-dropdown-title"><span class="title">插件</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plugin/HRM-Player/" class="nav-link">
  HRM 播放器
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Vue-Flv-Player/" class="nav-link">
  FLV 播放器
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Calendar/" class="nav-link">
  Calendar 农历面板
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Very-Axios/" class="nav-link">
  Very-Axios
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="utils Menu" class="dropdown-title"><span class="title">函数库</span> <span class="arrow down"></span></button> <button type="button" aria-label="utils Menu" class="mobile-dropdown-title"><span class="title">函数库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/utils/Type/" class="nav-link">
  类型判断类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Validator/" class="nav-link">
  常规验证类
</a></li><li class="dropdown-item"><!----> <a href="/utils/String/" class="nav-link">
  字符串类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Array/" class="nav-link">
  数组类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Number/" class="nav-link">
  数字类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Money/" class="nav-link">
  金额类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Date/" class="nav-link">
  日期类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Calculate/" class="nav-link">
  浮点计算类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Tools/" class="nav-link">
  工具类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Storage/" class="nav-link">
  存储类
</a></li><li class="dropdown-item"><!----> <a href="/utils/DOM/" class="nav-link">
  DOM类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Event/" class="nav-link">
  事件处理类
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="tools Menu" class="dropdown-title"><span class="title">工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="tools Menu" class="mobile-dropdown-title"><span class="title">工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/tools/NodeJS/" class="nav-link">
  NodeJS
</a></li><li class="dropdown-item"><!----> <a href="/tools/Sourcetree/" class="nav-link">
  Sourcetree
</a></li><li class="dropdown-item"><!----> <a href="/tools/VisualStudioCode/" class="nav-link">
  VSCode
</a></li><li class="dropdown-item"><!----> <a href="/tools/XShell/" class="nav-link">
  XShell
</a></li><li class="dropdown-item"><!----> <a href="/tools/Typora/" class="nav-link">
  Typora
</a></li><li class="dropdown-item"><!----> <a href="/tools/PicGo/" class="nav-link">
  PicGo
</a></li><li class="dropdown-item"><!----> <a href="/tools/XMind/" class="nav-link">
  XMind
</a></li></ul></div></div> <!----></nav> <label title="切换暗色" class="model"><input type="checkbox" hidden="hidden" name="model" id>⚫</label></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="standard Menu" class="dropdown-title"><span class="title">规范</span> <span class="arrow down"></span></button> <button type="button" aria-label="standard Menu" class="mobile-dropdown-title"><span class="title">规范</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/standard/HTML/" class="nav-link">
  HTML编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/CSS/" class="nav-link">
  CSS编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/JavaScript/" class="nav-link">
  JavaScript编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/VUE/" class="nav-link">
  VUE编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/Markdown/" class="nav-link">
  Markdown语法说明
</a></li><li class="dropdown-item"><!----> <a href="/standard/Commit/" class="nav-link">
  Git提交规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/JSON/" class="nav-link">
  JSON数据规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/CopyWriter/" class="nav-link">
  文案风格指南
</a></li></ul></div></div><div class="nav-item"><a href="/desgin/" class="nav-link">
  可视化平台
</a></div><div class="nav-item"><a href="/materiel/" class="nav-link">
  物料
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="plugin Menu" class="dropdown-title"><span class="title">插件</span> <span class="arrow down"></span></button> <button type="button" aria-label="plugin Menu" class="mobile-dropdown-title"><span class="title">插件</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plugin/HRM-Player/" class="nav-link">
  HRM 播放器
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Vue-Flv-Player/" class="nav-link">
  FLV 播放器
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Calendar/" class="nav-link">
  Calendar 农历面板
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Very-Axios/" class="nav-link">
  Very-Axios
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="utils Menu" class="dropdown-title"><span class="title">函数库</span> <span class="arrow down"></span></button> <button type="button" aria-label="utils Menu" class="mobile-dropdown-title"><span class="title">函数库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/utils/Type/" class="nav-link">
  类型判断类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Validator/" class="nav-link">
  常规验证类
</a></li><li class="dropdown-item"><!----> <a href="/utils/String/" class="nav-link">
  字符串类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Array/" class="nav-link">
  数组类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Number/" class="nav-link">
  数字类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Money/" class="nav-link">
  金额类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Date/" class="nav-link">
  日期类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Calculate/" class="nav-link">
  浮点计算类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Tools/" class="nav-link">
  工具类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Storage/" class="nav-link">
  存储类
</a></li><li class="dropdown-item"><!----> <a href="/utils/DOM/" class="nav-link">
  DOM类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Event/" class="nav-link">
  事件处理类
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="tools Menu" class="dropdown-title"><span class="title">工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="tools Menu" class="mobile-dropdown-title"><span class="title">工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/tools/NodeJS/" class="nav-link">
  NodeJS
</a></li><li class="dropdown-item"><!----> <a href="/tools/Sourcetree/" class="nav-link">
  Sourcetree
</a></li><li class="dropdown-item"><!----> <a href="/tools/VisualStudioCode/" class="nav-link">
  VSCode
</a></li><li class="dropdown-item"><!----> <a href="/tools/XShell/" class="nav-link">
  XShell
</a></li><li class="dropdown-item"><!----> <a href="/tools/Typora/" class="nav-link">
  Typora
</a></li><li class="dropdown-item"><!----> <a href="/tools/PicGo/" class="nav-link">
  PicGo
</a></li><li class="dropdown-item"><!----> <a href="/tools/XMind/" class="nav-link">
  XMind
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>规范</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/standard/" aria-current="page" class="sidebar-link">目标</a></li><li><a href="/standard/HTML.html" aria-current="page" class="active sidebar-link">HTML 编码规范</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/standard/HTML.html#_1-前言" class="sidebar-link">1 前言</a></li><li class="sidebar-sub-header"><a href="/standard/HTML.html#_2-代码风格" class="sidebar-link">2 代码风格</a></li><li class="sidebar-sub-header"><a href="/standard/HTML.html#_3-通用" class="sidebar-link">3 通用</a></li><li class="sidebar-sub-header"><a href="/standard/HTML.html#_4-head" class="sidebar-link">4 head</a></li><li class="sidebar-sub-header"><a href="/standard/HTML.html#_5-图片" class="sidebar-link">5 图片</a></li><li class="sidebar-sub-header"><a href="/standard/HTML.html#_6-表单" class="sidebar-link">6 表单</a></li><li class="sidebar-sub-header"><a href="/standard/HTML.html#_7-多媒体" class="sidebar-link">7 多媒体</a></li></ul></li><li><a href="/standard/CSS.html" class="sidebar-link">CSS 编码规范</a></li><li><a href="/standard/JavaScript.html" class="sidebar-link">JavaScript 编码规范</a></li><li><a href="/standard/VUE.html" class="sidebar-link">Vue 编码规范</a></li><li><a href="/standard/Markdown.html" class="sidebar-link">Markdown 语法说明</a></li><li><a href="/standard/Commit.html" class="sidebar-link">Git Commit 规范指南</a></li><li><a href="/standard/JSON.html" class="sidebar-link">JSON 数据传输标准</a></li><li><a href="/standard/CopyWriter.html" class="sidebar-link">文案风格指南</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="html-编码规范"><a href="#html-编码规范" class="header-anchor">#</a> HTML 编码规范</h1> <h2 id="_1-前言"><a href="#_1-前言" class="header-anchor">#</a> 1 前言</h2> <p>本文档的目标是使 HTML 代码风格保持一致，容易被理解和被维护。</p> <h2 id="_2-代码风格"><a href="#_2-代码风格" class="header-anchor">#</a> 2 代码风格</h2> <h3 id="_2-1-缩进与换行"><a href="#_2-1-缩进与换行" class="header-anchor">#</a> 2.1 缩进与换行</h3> <h4 id="【建议】-使用-2-个空格做为一个缩进层级-不允许使用-tab-字符。"><a href="#【建议】-使用-2-个空格做为一个缩进层级-不允许使用-tab-字符。" class="header-anchor">#</a> <strong>【建议】</strong> 使用  <code>2</code>  个空格做为一个缩进层级，不允许使用  <code>tab</code>  字符。</h4> <p>解释：
对于非 HTML 标签之间的缩进，比如 script 或 style 标签内容缩进，与 script 或 style 标签的缩进同级。</p> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token comment">/* 样式内容的第一级缩进与所属的 style 标签对齐 */</span>
<span class="token selector">ul</span> <span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>first<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>second<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token comment">// 脚本代码的第一级缩进与所属的 script 标签对齐</span>
<span class="token function">require</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'app'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">app</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  app<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="【建议】-每行不得超过-120-个字符。"><a href="#【建议】-每行不得超过-120-个字符。" class="header-anchor">#</a> <strong>【建议】</strong> 每行不得超过  <code>120</code>  个字符。</h4> <p>解释：</p> <p>过长的代码不容易阅读与维护。但是考虑到 HTML 的特殊性，不做硬性要求。</p> <h3 id="_2-2-命名"><a href="#_2-2-命名" class="header-anchor">#</a> 2.2 命名</h3> <h4 id="【强制】-class-必须单词全字母小写-单词间以-分隔。"><a href="#【强制】-class-必须单词全字母小写-单词间以-分隔。" class="header-anchor">#</a> <strong>【强制】</strong> <code>class</code>  必须单词全字母小写，单词间以  <code>-</code>  分隔。</h4> <h4 id="【强制】-class-必须代表相应模块或部件的内容或功能-不得以样式信息进行命名。"><a href="#【强制】-class-必须代表相应模块或部件的内容或功能-不得以样式信息进行命名。" class="header-anchor">#</a> <strong>【强制】</strong> <code>class</code>  必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。</h4> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- good --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sidebar<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- bad --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>left<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="【强制】-元素-id-必须保证页面唯一。"><a href="#【强制】-元素-id-必须保证页面唯一。" class="header-anchor">#</a> <strong>【强制】</strong> 元素  <code>id</code>  必须保证页面唯一。</h4> <p>解释：</p> <p>同一个页面中，不同的元素包含相同的  <code>id</code> ，不符合  <code>id</code>  的属性含义。并且使用  <code>document.getElementById</code>  时可能导致难以追查的问题。</p> <h4 id="【建议】-id-建议单词全字母小写-单词间以-分隔。同项目必须保持风格一致。"><a href="#【建议】-id-建议单词全字母小写-单词间以-分隔。同项目必须保持风格一致。" class="header-anchor">#</a> <strong>【建议】</strong> <code>id</code>  建议单词全字母小写，单词间以  <code>-</code>  分隔。同项目必须保持风格一致。</h4> <h4 id="【建议】-id、class-命名-在避免冲突并描述清楚的前提下尽可能短。"><a href="#【建议】-id、class-命名-在避免冲突并描述清楚的前提下尽可能短。" class="header-anchor">#</a> <strong>【建议】</strong> <code>id</code> 、 <code>class</code>  命名，在避免冲突并描述清楚的前提下尽可能短。</h4> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- good --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- bad --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navigation<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- good --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>comment<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- bad --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>com<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- good --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>author<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- bad --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>red<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="【强制】-禁止为了-hook-脚本-创建无样式信息的-class。"><a href="#【强制】-禁止为了-hook-脚本-创建无样式信息的-class。" class="header-anchor">#</a> <strong>【强制】</strong> 禁止为了  <code>hook 脚本</code> ，创建无样式信息的  <code>class</code> 。</h4> <p>解释：</p> <p>不允许  <code>class</code>  只用于让 JavaScript 选择某些元素， <code>class</code>  应该具有明确的语义和样式。否则容易导致 CSS class 泛滥。</p> <p>使用  <code>id</code> 、属性选择作为 hook 是更好的方式。</p> <h4 id="【强制】-同一页面-应避免使用相同的-name-与-id。"><a href="#【强制】-同一页面-应避免使用相同的-name-与-id。" class="header-anchor">#</a> <strong>【强制】</strong> 同一页面，应避免使用相同的  <code>name</code>  与  <code>id</code> 。</h4> <p>解释：</p> <p>IE 浏览器会混淆元素的  <code>id</code>  和  <code>name</code>  属性，  <code>document.getElementById</code>  可能获得不期望的元素。所以在对元素的  <code>id</code>  与  <code>name</code>  属性的命名需要非常小心。</p> <p>一个比较好的实践是，为  <code>id</code>  和  <code>name</code>  使用不同的命名法。</p> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>foo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>foo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token comment">// IE6 将显示 INPUT</span>
<span class="token function">alert</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>tagName<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="_2-3-标签"><a href="#_2-3-标签" class="header-anchor">#</a> 2.3 标签</h3> <h4 id="【强制】-标签名必须使用小写字母。"><a href="#【强制】-标签名必须使用小写字母。" class="header-anchor">#</a> <strong>【强制】</strong> 标签名必须使用小写字母。</h4> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- good --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Hello StyleGuide!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- bad --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>P</span><span class="token punctuation">&gt;</span></span>Hello StyleGuide!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>P</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="【强制】-对于无需自闭合的标签-不允许自闭合。"><a href="#【强制】-对于无需自闭合的标签-不允许自闭合。" class="header-anchor">#</a> <strong>【强制】</strong> 对于无需自闭合的标签，不允许自闭合。</h4> <p>解释：</p> <p>常见无需自闭合标签有  <code>input</code> 、 <code>br</code> 、 <code>img</code> 、 <code>hr</code>  等。</p> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- good --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- bad --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
</code></pre></div><h4 id="【强制】-对-html5-中规定允许省略的闭合标签-不允许省略闭合标签。"><a href="#【强制】-对-html5-中规定允许省略的闭合标签-不允许省略闭合标签。" class="header-anchor">#</a> <strong>【强制】</strong> 对  <code>HTML5</code>  中规定允许省略的闭合标签，不允许省略闭合标签。</h4> <p>解释：</p> <p>对代码体积要求非常严苛的场景，可以例外。比如：第三方页面使用的投放系统。</p> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- good --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>first<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>second<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- bad --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>first
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>second
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="【强制】-标签使用必须符合标签嵌套规则。"><a href="#【强制】-标签使用必须符合标签嵌套规则。" class="header-anchor">#</a> <strong>【强制】</strong> 标签使用必须符合标签嵌套规则。</h4> <p>解释：</p> <p>比如  <code>div</code>  不得置于  <code>p</code>  中， <code>tbody</code>  必须置于  <code>table</code>  中。</p> <p>规则：</p> <ul><li>块级元素能包含块级元素和内联元素，内联元素只能包含内联元素；</li> <li>标题和段落中不能包含块级元素；</li> <li>块级元素与块级元素并列、内嵌元素与内嵌元素并列</li></ul> <h4 id="【建议】-html-标签的使用应该遵循标签的语义。"><a href="#【建议】-html-标签的使用应该遵循标签的语义。" class="header-anchor">#</a> <strong>【建议】</strong> HTML 标签的使用应该遵循标签的语义。</h4> <p>解释：</p> <p>下面是常见标签语义</p> <ul><li><code>p</code>  - 段落</li> <li><code>h1</code>  ,  <code>h2</code>  ,  <code>h3</code>  ,  <code>h4</code>  ,  <code>h5</code>  ,  <code>h6</code>  - 层级标题</li> <li><code>strong</code>  ,  <code>em</code>  - 强调</li> <li><code>ins</code>  - 插入</li> <li><code>del</code>  - 删除</li> <li><code>abbr</code>  - 缩写</li> <li><code>code</code>  - 代码标识</li> <li><code>cite</code>  - 引述来源作品的标题</li> <li><code>q</code>  - 引用</li> <li><code>blockquote</code>  - 一段或长篇引用</li> <li><code>ul</code>  - 无序列表</li> <li><code>ol</code>  - 有序列表</li> <li><code>dl</code>  ,  <code>dt</code>  ,  <code>dd</code>  - 定义列表</li></ul> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- good --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Esprima serves as an important <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>building block<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span> for some JavaScript language tools.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- bad --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>Esprima serves as an important <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>strong<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>building block<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span> for some JavaScript language tools.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>**【强制】** 不允许使用过时的旧标签，请使用新标签或者 CSS 代替：</p> <ul><li><del><code>acronym</code></del> → <ins><code>abbr</code></ins></li> <li><del><code>applet</code></del> → <ins><code>object</code></ins></li> <li><del><code>b</code></del> → <ins><code>strong</code></ins></li> <li><del><code>dir</code></del> → <ins><code>ul</code></ins></li> <li><del><code>strike</code></del> → <ins><code>del</code></ins></li> <li><del><code>basefont</code></del></li> <li><del><code>big</code></del></li> <li><del><code>center</code></del></li> <li><del><code>font</code></del></li> <li><del><code>isindex</code></del></li> <li><del><code>tt</code></del></li> <li><del><code>u</code></del></li></ul> <p>请参详：http://www.w3schools.com/tags/</p> <h4 id="【建议】-在-css-可以实现相同需求的情况下不得使用表格进行布局。"><a href="#【建议】-在-css-可以实现相同需求的情况下不得使用表格进行布局。" class="header-anchor">#</a> <strong>【建议】</strong> 在 CSS 可以实现相同需求的情况下不得使用表格进行布局。</h4> <p>解释：</p> <p>在兼容性允许的情况下应尽量保持语义正确性。对网格对齐和拉伸性有严格要求的场景允许例外，如多列复杂表单。</p> <h4 id="【建议】-标签的使用应尽量简洁-减少不必要的标签。"><a href="#【建议】-标签的使用应尽量简洁-减少不必要的标签。" class="header-anchor">#</a> <strong>【建议】</strong> 标签的使用应尽量简洁，减少不必要的标签。</h4> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- good --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>avatar<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>image.png<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- bad --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>avatar<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>image.png<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="_2-4-属性"><a href="#_2-4-属性" class="header-anchor">#</a> 2.4 属性</h3> <h4 id="【强制】-属性名必须使用小写字母。"><a href="#【强制】-属性名必须使用小写字母。" class="header-anchor">#</a> <strong>【强制】</strong> 属性名必须使用小写字母。</h4> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- good --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span> <span class="token attr-name">cellspacing</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- bad --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span> <span class="token attr-name">cellSpacing</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="【强制】-属性值必须用双引号包围。"><a href="#【强制】-属性值必须用双引号包围。" class="header-anchor">#</a> <strong>【强制】</strong> 属性值必须用双引号包围。</h4> <p>解释：</p> <p>不允许使用单引号，不允许不使用引号。</p> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- good --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>esl.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- bad --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>esl.js<span class="token punctuation">'</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>esl.js</span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="【建议】-布尔类型的属性-建议不添加属性值。"><a href="#【建议】-布尔类型的属性-建议不添加属性值。" class="header-anchor">#</a> <strong>【建议】</strong> 布尔类型的属性，建议不添加属性值。</h4> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="【建议】-自定义属性建议以-xxx-为前缀-推荐使用-data-。"><a href="#【建议】-自定义属性建议以-xxx-为前缀-推荐使用-data-。" class="header-anchor">#</a> <strong>【建议】</strong> 自定义属性建议以  <code>xxx-</code>  为前缀，推荐使用  <code>data-</code> 。</h4> <p>解释：</p> <p>使用前缀有助于区分自定义属性和标准定义的属性。</p> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ol</span> <span class="token attr-name">data-ui-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Select<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ol</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="_3-通用"><a href="#_3-通用" class="header-anchor">#</a> 3 通用</h2> <h3 id="_3-1-doctype"><a href="#_3-1-doctype" class="header-anchor">#</a> 3.1 DOCTYPE</h3> <h4 id="【强制】-使用-html5-的-doctype-来启用标准模式-建议使用大写的-doctype。"><a href="#【强制】-使用-html5-的-doctype-来启用标准模式-建议使用大写的-doctype。" class="header-anchor">#</a> <strong>【强制】</strong> 使用  <code>HTML5</code>  的  <code>doctype</code>  来启用标准模式，建议使用大写的  <code>DOCTYPE</code> 。</h4> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="【建议】-启用-ie-edge-模式。"><a href="#【建议】-启用-ie-edge-模式。" class="header-anchor">#</a> <strong>【建议】</strong> 启用 IE Edge 模式。</h4> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>X-UA-Compatible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>IE=Edge<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="【建议】-在-html-标签上设置正确的-lang-属性。"><a href="#【建议】-在-html-标签上设置正确的-lang-属性。" class="header-anchor">#</a> <strong>【建议】</strong> 在  <code>html</code>  标签上设置正确的  <code>lang</code>  属性。</h4> <p>解释：</p> <p>有助于提高页面的可访问性，如：让语音合成工具确定其所应该采用的发音，令翻译工具确定其翻译语言等。</p> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>zh-CN<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="_3-2-编码"><a href="#_3-2-编码" class="header-anchor">#</a> 3.2 编码</h3> <h4 id="【强制】-页面必须使用精简形式-明确指定字符编码。指定字符编码的-meta-必须是-head-的第一个直接子元素。"><a href="#【强制】-页面必须使用精简形式-明确指定字符编码。指定字符编码的-meta-必须是-head-的第一个直接子元素。" class="header-anchor">#</a> <strong>【强制】</strong> 页面必须使用精简形式，明确指定字符编码。指定字符编码的  <code>meta</code>  必须是  <code>head</code>  的第一个直接子元素。</h4> <p>解释：</p> <p>见 <a href="http://www.qianduan.net/html5-charset-can-it.html" target="_blank" rel="noopener noreferrer">HTML5 Charset 能用吗<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 一文。</p> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    ......
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    ......
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="【建议】-html-文件使用无-bom-的-utf-8-编码。"><a href="#【建议】-html-文件使用无-bom-的-utf-8-编码。" class="header-anchor">#</a> <strong>【建议】</strong> <code>HTML</code>  文件使用无  <code>BOM</code>  的  <code>UTF-8</code>  编码。</h4> <p>解释：</p> <p><code>UTF-8</code>  编码具有更广泛的适应性。 <code>BOM</code>  在使用程序或工具处理文件时可能造成不必要的干扰。</p> <h3 id="_3-3-css-和-javascript-引入"><a href="#_3-3-css-和-javascript-引入" class="header-anchor">#</a> 3.3 CSS 和 JavaScript 引入</h3> <h4 id="【强制】-引入-css-时必须指明-rel-stylesheet-。"><a href="#【强制】-引入-css-时必须指明-rel-stylesheet-。" class="header-anchor">#</a> <strong>【强制】</strong> 引入  <code>CSS</code>  时必须指明  <code>rel=&quot;stylesheet&quot;</code> 。</h4> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>page.css<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="【建议】-引入-css-和-javascript-时无须指明-type-属性。"><a href="#【建议】-引入-css-和-javascript-时无须指明-type-属性。" class="header-anchor">#</a> <strong>【建议】</strong> 引入  <code>CSS</code>  和  <code>JavaScript</code>  时无须指明  <code>type</code>  属性。</h4> <p>解释：</p> <p><code>text/css</code>  和  <code>text/javascript</code>  是  <code>type</code>  的默认值。</p> <h4 id="【建议】-展现定义放置于外部-css-中-行为定义放置于外部-javascript-中。"><a href="#【建议】-展现定义放置于外部-css-中-行为定义放置于外部-javascript-中。" class="header-anchor">#</a> <strong>【建议】</strong> 展现定义放置于外部  <code>CSS</code>  中，行为定义放置于外部  <code>JavaScript</code>  中。</h4> <p>解释：</p> <p>结构 - 样式 - 行为的代码分离，对于提高代码的可阅读性和维护性都有好处。</p> <h4 id="【建议】-在-head-中引入页面需要的所有-css-资源。"><a href="#【建议】-在-head-中引入页面需要的所有-css-资源。" class="header-anchor">#</a> <strong>【建议】</strong> 在  <code>head</code>  中引入页面需要的所有  <code>CSS</code>  资源。</h4> <p>解释：</p> <p>在页面渲染的过程中，新的 CSS 可能导致元素的样式重新计算和绘制，页面闪烁。</p> <h4 id="【建议】-javascript-应当放在页面末尾-或采用异步加载。"><a href="#【建议】-javascript-应当放在页面末尾-或采用异步加载。" class="header-anchor">#</a> <strong>【建议】</strong> <code>JavaScript</code>  应当放在页面末尾，或采用异步加载。</h4> <p>解释：</p> <p>将  <code>script</code>  放在页面中间将阻断页面的渲染。出于性能方面的考虑，如非必要，请遵守此条建议。</p> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- a lot of elements --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>init-behavior.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="【建议】-移动环境或只针对现代浏览器设计的-web-应用-如果引用外部资源的-url-协议部分与页面相同-建议省略协议前缀。"><a href="#【建议】-移动环境或只针对现代浏览器设计的-web-应用-如果引用外部资源的-url-协议部分与页面相同-建议省略协议前缀。" class="header-anchor">#</a> <strong>【建议】</strong> 移动环境或只针对现代浏览器设计的 Web 应用，如果引用外部资源的  <code>URL</code>  协议部分与页面相同，建议省略协议前缀。</h4> <p>解释：</p> <p>使用  <code>protocol-relative URL</code>  引入 CSS，在  <code>IE7/8</code>  下，会发两次请求。是否使用  <code>protocol-relative URL</code>  应充分考虑页面针对的环境。</p> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>//s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="_4-head"><a href="#_4-head" class="header-anchor">#</a> 4 head</h2> <h3 id="_4-1-title"><a href="#_4-1-title" class="header-anchor">#</a> 4.1 title</h3> <h4 id="【强制】-页面必须包含-title-标签声明标题。"><a href="#【强制】-页面必须包含-title-标签声明标题。" class="header-anchor">#</a> <strong>【强制】</strong> 页面必须包含  <code>title</code>  标签声明标题。</h4> <h4 id="【强制】-title-必须作为-head-的直接子元素-并紧随-charset-声明之后。"><a href="#【强制】-title-必须作为-head-的直接子元素-并紧随-charset-声明之后。" class="header-anchor">#</a> <strong>【强制】</strong> <code>title</code>  必须作为  <code>head</code>  的直接子元素，并紧随  <code>charset</code>  声明之后。</h4> <p>解释：</p> <p><code>title</code>  中如果包含 ASCII 之外的字符，浏览器需要知道字符编码类型才能进行解码，否则可能导致乱码。</p> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>页面标题<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="_4-2-favicon"><a href="#_4-2-favicon" class="header-anchor">#</a> 4.2 favicon</h3> <h4 id="【强制】-保证-favicon-可访问。"><a href="#【强制】-保证-favicon-可访问。" class="header-anchor">#</a> <strong>【强制】</strong> 保证  <code>favicon</code>  可访问。</h4> <p>解释：</p> <p>在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的  <code>favicon.ico</code>  。为了保证 favicon 可访问，避免 404，必须遵循以下两种方法之一：</p> <ol><li>在 Web Server 根目录放置  <code>favicon.ico</code>  文件。</li> <li>使用  <code>link</code>  指定 favicon。</li></ol> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>shortcut icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>path/to/favicon.ico<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="_4-3-viewport"><a href="#_4-3-viewport" class="header-anchor">#</a> 4.3 viewport</h3> <h4 id="【建议】-若页面欲对移动设备友好-需指定页面的-viewport。"><a href="#【建议】-若页面欲对移动设备友好-需指定页面的-viewport。" class="header-anchor">#</a> <strong>【建议】</strong> 若页面欲对移动设备友好，需指定页面的  <code>viewport</code> 。</h4> <p>解释：</p> <p>viewport meta tag 可以设置可视区域的宽度和初始缩放大小，避免在移动设备上出现页面展示不正常。</p> <p>比如，在页面宽度小于  <code>980px</code>  时，若需 iOS 设备友好，应当设置 viewport 的  <code>width</code>  值来适应你的页面宽度。同时因为不同移动设备分辨率不同，在设置时，应当使用  <code>device-width</code>  和  <code>device-height</code>  变量。</p> <p>另外，为了使 viewport 正常工作，在页面内容样式布局设计上也要做相应调整，如避免绝对定位等。关于 viewport 的更多介绍，可以参见 <a href="https://developer.apple.com/library/mac/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW26" target="_blank" rel="noopener noreferrer">Safari Web Content Guide 的介绍<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="_5-图片"><a href="#_5-图片" class="header-anchor">#</a> 5 图片</h2> <h4 id="【强制】-禁止-img-的-src-取值为空。延迟加载的图片也要增加默认的-src。"><a href="#【强制】-禁止-img-的-src-取值为空。延迟加载的图片也要增加默认的-src。" class="header-anchor">#</a> <strong>【强制】</strong> 禁止  <code>img</code>  的  <code>src</code>  取值为空。延迟加载的图片也要增加默认的  <code>src</code> 。</h4> <p>解释：</p> <p><code>src</code>  取值为空，会导致部分浏览器重新加载一次当前页面，参考：<a href="https://developer.yahoo.com/performance/rules.html#emptysrc" target="_blank" rel="noopener noreferrer">https://developer.yahoo.com/performance/rules.html#emptysrc<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h4 id="【建议】-避免为-img-添加不必要的-title-属性。"><a href="#【建议】-避免为-img-添加不必要的-title-属性。" class="header-anchor">#</a> <strong>【建议】</strong> 避免为  <code>img</code>  添加不必要的  <code>title</code>  属性。</h4> <p>解释：</p> <p>多余的  <code>title</code>  影响看图体验，并且增加了页面尺寸。</p> <h4 id="【建议】-为重要图片添加-alt-属性。"><a href="#【建议】-为重要图片添加-alt-属性。" class="header-anchor">#</a> <strong>【建议】</strong> 为重要图片添加  <code>alt</code>  属性。</h4> <p>解释：</p> <p>可以提高图片加载失败时的用户体验。</p> <h4 id="【建议】-添加-width-和-height-属性-以避免页面抖动。"><a href="#【建议】-添加-width-和-height-属性-以避免页面抖动。" class="header-anchor">#</a> <strong>【建议】</strong> 添加  <code>width</code>  和  <code>height</code>  属性，以避免页面抖动。</h4> <h4 id="【建议】-有下载需求的图片采用-img-标签实现-无下载需求的图片采用-css-背景图实现。"><a href="#【建议】-有下载需求的图片采用-img-标签实现-无下载需求的图片采用-css-背景图实现。" class="header-anchor">#</a> <strong>【建议】</strong> 有下载需求的图片采用  <code>img</code>  标签实现，无下载需求的图片采用 CSS 背景图实现。</h4> <p>解释：</p> <ol><li>产品 logo、用户头像、用户产生的图片等有潜在下载需求的图片，以  <code>img</code>  形式实现，能方便用户下载。</li> <li>无下载需求的图片，比如：icon、背景、代码使用的图片等，尽可能采用 CSS 背景图实现。</li></ol> <h2 id="_6-表单"><a href="#_6-表单" class="header-anchor">#</a> 6 表单</h2> <h3 id="_6-1-控件标题"><a href="#_6-1-控件标题" class="header-anchor">#</a> 6.1 控件标题</h3> <h4 id="【强制】-有文本标题的控件必须使用-label-标签将其与其标题相关联。"><a href="#【强制】-有文本标题的控件必须使用-label-标签将其与其标题相关联。" class="header-anchor">#</a> <strong>【强制】</strong> 有文本标题的控件必须使用  <code>label</code>  标签将其与其标题相关联。</h4> <p>解释：</p> <p>有两种方式：</p> <ol><li>将控件置于  <code>label</code>  内。</li> <li><code>label</code>  的  <code>for</code>  属性指向控件的  <code>id</code> 。</li></ol> <p>推荐使用第一种，减少不必要的  <code>id</code> 。如果 DOM 结构不允许直接嵌套，则应使用第二种。</p> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>confirm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> 我已确认上述条款<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>username<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>用户名：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>textbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>username<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="_6-2-按钮"><a href="#_6-2-按钮" class="header-anchor">#</a> 6.2 按钮</h3> <h4 id="【强制】-使用-button-元素时必须指明-type-属性值。"><a href="#【强制】-使用-button-元素时必须指明-type-属性值。" class="header-anchor">#</a> <strong>【强制】</strong> 使用  <code>button</code>  元素时必须指明  <code>type</code>  属性值。</h4> <p>解释：</p> <p><code>button</code>  元素的默认  <code>type</code>  为  <code>submit</code> ，如果被置于  <code>form</code>  元素中，点击后将导致表单提交。为显示区分其作用方便理解，必须给出  <code>type</code>  属性。</p> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>提交<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>取消<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="【建议】-尽量不要使用按钮类元素的-name-属性。"><a href="#【建议】-尽量不要使用按钮类元素的-name-属性。" class="header-anchor">#</a> <strong>【建议】</strong> 尽量不要使用按钮类元素的  <code>name</code>  属性。</h4> <p>解释：</p> <p>由于浏览器兼容性问题，使用按钮的  <code>name</code>  属性会带来许多难以发现的问题。具体情况可参考<a href="http://w3help.org/zh-cn/causes/CM2001" target="_blank" rel="noopener noreferrer">此文<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h3 id="_6-3-可访问性-a11y"><a href="#_6-3-可访问性-a11y" class="header-anchor">#</a> 6.3 可访问性 (A11Y)</h3> <h4 id="【建议】-负责主要功能的按钮在-dom-中的顺序应靠前。"><a href="#【建议】-负责主要功能的按钮在-dom-中的顺序应靠前。" class="header-anchor">#</a> <strong>【建议】</strong> 负责主要功能的按钮在 DOM 中的顺序应靠前。</h4> <p>解释：</p> <p>负责主要功能的按钮应相对靠前，以提高可访问性。如果在 CSS 中指定了  <code>float: right</code>  则可能导致视觉上主按钮在前，而 DOM 中主按钮靠后的情况。</p> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- good --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.buttons .button-group</span> <span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>buttons<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>提交<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>取消<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- bad --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.buttons button</span> <span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>buttons<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>取消<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>提交<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="【建议】-当使用-javascript-进行表单提交时-如果条件允许-应使原生提交功能正常工作。"><a href="#【建议】-当使用-javascript-进行表单提交时-如果条件允许-应使原生提交功能正常工作。" class="header-anchor">#</a> <strong>【建议】</strong> 当使用 JavaScript 进行表单提交时，如果条件允许，应使原生提交功能正常工作。</h4> <p>解释：</p> <p>当浏览器 JS 运行错误或关闭 JS 时，提交功能将无法工作。如果正确指定了  <code>form</code>  元素的  <code>action</code>  属性和表单控件的  <code>name</code>  属性时，提交仍可继续进行。</p> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/login<span class="token punctuation">&quot;</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>post<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>用户名<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>密码<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="【建议】-在针对移动设备开发的页面时-根据内容类型指定输入框的-type-属性。"><a href="#【建议】-在针对移动设备开发的页面时-根据内容类型指定输入框的-type-属性。" class="header-anchor">#</a> <strong>【建议】</strong> 在针对移动设备开发的页面时，根据内容类型指定输入框的  <code>type</code>  属性。</h4> <p>解释：</p> <p>根据内容类型指定输入框类型，能获得能友好的输入体验。</p> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="_7-多媒体"><a href="#_7-多媒体" class="header-anchor">#</a> 7 多媒体</h2> <h4 id="【建议】-当在现代浏览器中使用-audio-以及-video-标签来播放音频、视频时-应当注意格式。"><a href="#【建议】-当在现代浏览器中使用-audio-以及-video-标签来播放音频、视频时-应当注意格式。" class="header-anchor">#</a> <strong>【建议】</strong> 当在现代浏览器中使用  <code>audio</code>  以及  <code>video</code>  标签来播放音频、视频时，应当注意格式。</h4> <p>解释：</p> <p>音频应尽可能覆盖到如下格式：</p> <ul><li>MP3</li> <li>WAV</li> <li>Ogg</li></ul> <p>视频应尽可能覆盖到如下格式：</p> <ul><li>MP4</li> <li>WebM</li> <li>Ogg</li></ul> <h4 id="【建议】-在支持-html5-的浏览器中优先使用-audio-和-video-标签来定义音视频元素。"><a href="#【建议】-在支持-html5-的浏览器中优先使用-audio-和-video-标签来定义音视频元素。" class="header-anchor">#</a> <strong>【建议】</strong> 在支持  <code>HTML5</code>  的浏览器中优先使用  <code>audio</code>  和  <code>video</code>  标签来定义音视频元素。</h4> <h4 id="【建议】-使用退化到插件的方式来对多浏览器进行支持。"><a href="#【建议】-使用退化到插件的方式来对多浏览器进行支持。" class="header-anchor">#</a> <strong>【建议】</strong> 使用退化到插件的方式来对多浏览器进行支持。</h4> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>audio</span> <span class="token attr-name">controls</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>audio.mp3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>audio/mpeg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>audio.ogg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>audio/ogg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>object</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>50<span class="token punctuation">&quot;</span></span> <span class="token attr-name">data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>audio.mp3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>embed</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>50<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>audio.swf<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>object</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>audio</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>video</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>50<span class="token punctuation">&quot;</span></span> <span class="token attr-name">controls</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>video.mp4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>video/mp4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>video.ogg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>video/ogg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>object</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>50<span class="token punctuation">&quot;</span></span> <span class="token attr-name">data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>video.mp4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>embed</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>50<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>video.swf<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>object</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>video</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="【建议】-只在必要的时候开启音视频的自动播放。"><a href="#【建议】-只在必要的时候开启音视频的自动播放。" class="header-anchor">#</a> <strong>【建议】</strong> 只在必要的时候开启音视频的自动播放。</h4> <h4 id="【建议】-在-object-标签内部提供指示浏览器不支持该标签的说明。"><a href="#【建议】-在-object-标签内部提供指示浏览器不支持该标签的说明。" class="header-anchor">#</a> <strong>【建议】</strong> 在  <code>object</code>  标签内部提供指示浏览器不支持该标签的说明。</h4> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>object</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>50<span class="token punctuation">&quot;</span></span> <span class="token attr-name">data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>something.swf<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>DO NOT SUPPORT THIS TAG<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>object</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">文档更新时间:</span> <span class="time">2021-06-10 17:57:34</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/standard/" class="prev router-link-active">
        目标
      </a></span> <span class="next"><a href="/standard/CSS.html">
        CSS 编码规范
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><!----></div></div>
    <script src="/assets/js/app.7f089e4c.js" defer></script><script src="/assets/js/2.9f5e73e8.js" defer></script><script src="/assets/js/3.2a47c23c.js" defer></script><script src="/assets/js/24.a88ce84e.js" defer></script>
  </body>
</html>
